<template>
  <div class="InspectDetailCom" v-loading="loading">
    <div class="border">
      <div class="tabletitle">
        <div class="titleitem" v-for="(item, index) in responsedata.tableTop" :key="index">{{item}}</div>
      </div>
      <div class="tablecontent" v-for="(parentitem, parentindex) in responsedata.scrolldata" :key="parentindex">
        <div class="contentitem" v-for="(childrenitem,childrenindex) in parentitem" :key="childrenindex">
          <el-tooltip class="item" effect="dark" :content="childrenitem" placement="top">
            <div class="descriptiontext">{{childrenitem}}</div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue"
import { useRouter } from "vue-router"
import { dataQualityServiceApi } from "/@/api/personnel/bean/inspect"
const router = useRouter()
let responsedata = reactive({
  tableTop: [],
  scrolldata: []
})
let loading = ref(true)
const InspectDetailComState = reactive({
  ruleCode: router.currentRoute.value.query.ruleCode as string,
  initdataQuality: () => {
    dataQualityServiceApi
      .dataInfo({ ruleCode: InspectDetailComState.ruleCode }, null)
      .then((response: any) => {
        console.log(response)
        responsedata.tableTop = response.data.tableTop
        responsedata.scrolldata = response.data.data
        loading.value = false
      })
      .finally(() => {})
  }
})
onMounted(() => {
  InspectDetailComState.initdataQuality()
})
</script>

<style lang="scss" scoped>
.InspectDetailCom {
  background: #fff;
  height: calc(100% - 45px);
  overflow-x: scroll;
  overflow-y: scroll;
  .border {
    border: 1px solid #ccc;
    width: fit-content;
  }
  .tablecontent,
  .tabletitle {
    display: flex;
    border-bottom: 1px solid #ccc;
    .contentitem,
    .titleitem {
      width: 120px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-right: 1px solid #ccc;
    }
    .contentitem:last-child,
    .titleitem:last-child {
      border-right: none;
    }
  }
  .tablecontent:last-child {
    border-bottom: none;
  }

  .descriptiontext {
    cursor: pointer;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
}
</style>
